<template>
  <div class="container">
     <div class="school">{{school_name}}</div>
     <ul class="class clearfix">
       <li v-for="(value,index) in class_num" :data-index="index" :data-id="value.id" @click="selectClass" :class="{'select':value.select}">{{value.class_num}}</li>
     </ul>
     <div class="information">
       <div class="propaganda2">
            <div class="title">
            <span>基本信息:</span>
            <span>(必须先收集信息才可以开班级订单)</span>
            </div>
            <ul class="inputInformation clearfix">
            <li>
             <span>*班级</span>
             <input type="text" v-model="class_info.class_num"/>
            </li>
            <li>
             <span>*班级职务</span>
             <input type="text" v-model="class_info.position"/>
            </li>
            <li>
             <span>*姓名</span>
             <input type="text" v-model="class_info.realname"/>
            </li>
            <li>
             <span>*联系方式</span>
             <input type="text" v-model="class_info.phone"/>
            </li>
            </ul>
            <div class="propaganda">
              <div class="propagandaTitle">宣传阶段：</div>
              <div class="propagandaDetails">(依次完成宣传动作,可以提高成单率)</div>
              <ul class="checkboxGroup">
              <checkbox-group @change="checkboxChange">
               <li v-for="(value,index) in xc_info">
                  <checkbox :value="index" :checked="value.is_select==1 ? true :false" :data-index="index" />{{value.name}}
               </li>
              </checkbox-group>
              </ul>
              <textarea v-model="xc_desc"  placeholder="请输入文字"></textarea>
              <div class="save" @click="commit">保存更新</div>
            </div>
       </div>
         <div class="propaganda1 propaganda4">
           <div class="propagandaTitle">用户反馈:</div>
           <div class="propagandaDetails">收集用户反馈以及买家秀,可以获得奖励</div>
           <textarea v-model="reback_desc"  placeholder="请输入文字"></textarea>
           <ul class="uploadImg clearfix">
             <li v-for="(value,index) in yhfkImg" >
                <img :src="value.imgSrc" class="upload" @click="add(value.addTag,'yhfkImg',value.imgSrc)"/>
                <img src="http://file.rzkeji.com/web/loveciy/img/error.png" v-show="value.addTag==1 ? false : true" class="error" @click="del('yhfkImg',value.imgSrc,index)"/>
             </li>
           </ul>
           <div class="save"  @click="commit">保存更新</div>
         </div>
         <div class="propaganda1 propaganda4">
           <div class="propagandaTitle">售后问题:</div>
           <div class="propagandaDetails">如果有售后问题上传图片并对具体售后内容做情况说明</div>
           <textarea v-model="after_sale_desc"  placeholder="请输入文字" ></textarea>
           <ul class="uploadImg clearfix">
             <li v-for="(value,index) in shwtImg" >
                <img :src="value.imgSrc" class="upload" @click="add(value.addTag,'shwtImg',value.imgSrc)"/>
                <img src="http://file.rzkeji.com/web/loveciy/img/error.png" v-show="value.addTag==1 ? false : true" class="error" @click="del('shwtImg',value.imgSrc,index)"/>
             </li>
           </ul>
           <div class="save"  @click="commit">保存更新</div>
         </div>
     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      class_num:[],
      check:false,
      shwtImgArr:[],
      yhfkImgArr:[],
      numClass:[],
      xcArr:[],
      classId:"0",
      xc_desc:"",
      reback_desc:"",
      after_sale_desc:"",
      yhfkImg:[
       {
        imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
        addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
       },
      ],
      shwtImg:[
       {
        imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
        addTag:1,
       },
      ],
      // 基本信息开始
      class_info:{},
      // 基本信息结束
      // 宣传阶段开始
      xc_info:[],
      // 宣传阶段结束
      // 售后开始
      after_sale:{},
      // 售后结束
      // 反馈开始
      user_reback:{},
      // 反馈结束
      selctClassId:0,
      school_name:""
    }
  },
  methods : {
    checkboxChange(e){
      var _this=this;
      _this.xcArr=[];
      for(let [index,value] of _this.xc_info.entries()){
        _this.xc_info[index].is_select=0;
      }
      for(let [index,value] of e.target.value.entries()){
        _this.xc_info[value].is_select=1;
        _this.xcArr.push(_this.xc_info[value].id)
      }
    },
    selectClass(e){
      var _this=this;
      _this.selctClassId=e.target.dataset.index;
      console.log(_this.selctClassId)
      _this.shwtImg=[
      {
      imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
      addTag:1,
      },
      ]
      _this.yhfkImg=[
      {
      imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
      addTag:1,
      },
      ]
      for(let [index,value] of _this.class_num.entries()){
        if(index==e.target.dataset.index){
          value.select=true
        }else{
          value.select=false;
        }
      }
      _this.classId=e.target.dataset.id;
      _this.getInformation(e.target.dataset.id);
    },
    getInformation(id){
      var userToken=wx.getStorageSync('userToken');
      var _this=this;
      _this.$request.getData("https://diy.zoomyoung.cn/api/task/get-task-order",{'id':id,user_token:userToken}).then(res =>{
        var res=res.data.data;
          _this.xcArr=[];
        if(res.xc_info.xc_list!=null)
          {
            var isSelectXcListNum = 0;
            for(let [index,value] of res.xc_info.xc_list.entries())
            {
              if(value.is_select==1){
                _this.xcArr.push(value.id)
                isSelectXcListNum++
              }
            }
            if(isSelectXcListNum == 0){
                _this.xcArr=[]
            }
          }
        if(res.class_info!=null){    //当点击加号的时候 理应清空表单数据
          _this.class_info=res.class_info;
        }else{
          _this.class_info={
            class_num:"",
            phone:"",
            position:"",
            realname:""
          }
        }
        if(res.xc_info.xc_desc!=null){
          _this.xc_desc=res.xc_info.xc_desc;
        }else{
          _this.xc_desc=""
        }
        if(res.xc_info.xc_list!=[]){
          _this.xc_info=res.xc_info.xc_list;
        }else{
          _this.xc_info=[];
        }

         if(res.user_reback != null && res.user_reback.img_list!=[]){
              _this.yhfkImgArr=[];
              _this.yhfkImg=[];
               for(let [index,value] of res.user_reback.img_list.entries()){
              _this.yhfkImgArr.push(value.id)

              _this.yhfkImg.push({
                imgSrc:value.img_url,
                addTag:0,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
            })
          }
          _this.yhfkImg.push({
              imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
              addTag:1,
          })
        }else{
           _this.yhfkImg=[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1
           },
          ]
          if(res.user_reback == null){
              _this.yhfkImgArr=[];
          }
        }


        if(res.user_reback == null || res.user_reback.desc==null){
          _this.reback_desc=""
        }else{
          _this.reback_desc=res.user_reback.desc
        }


        if(res.after_sale != null && res.after_sale.img_list!=[]){
          _this.shwtImgArr=[];
          _this.shwtImg=[];
          for(let [index,value] of res.after_sale.img_list.entries()){
              _this.shwtImgArr.push(value.id)
              _this.shwtImg.push({
                imgSrc:value.img_url,
                addTag:0,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
            })
          }
          _this.shwtImg.push({
              imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
              addTag:1
          })
        }else{
          _this.shwtImg=[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,
           },
          ]
            if(res.after_sale == null){
                _this.shwtImgArr=[];
            }
        }


        if(res.after_sale == null || res.after_sale.desc==null){
          console.log('aa')
          _this.after_sale_desc=""
        }else{
          _this.after_sale_desc=res.after_sale.desc
        }
      })
    },
    del(type,imgSrc,index){
      var _this=this;
       if(type=='shwtImg')
       {
        _this.shwtImgArr.splice(index,1)
        _this.shwtImg.splice(index,1)
        console.log(_this.shwtImgArr)
       }else{
        _this.yhfkImgArr.splice(index,1)
        _this.yhfkImg.splice(index,1)
        console.log(_this.yhfkImgArr)
       }
    },
   add(addTag,type,imgSrc)
   {
    if(addTag==1)
    {
      //添加照片
      var _this=this;
      var imgId=""
      wx.chooseImage({   //选择上传照片
        count:1,
        sizeType:['original','compressed'],
        sourceType: ['album', 'camera'],
        success(res){
          wx.uploadFile({
            url:"https://diy.zoomyoung.cn/api/file/upload-img",
            filePath:res.tempFilePaths[0],
            name:"photo",
            header: {
            'content-type': 'application/json' // 默认值
            },
            success(res1){
              imgId=JSON.parse(res1.data).data.id;
              if(type=='shwtImg')
              {
                if(_this.shwtImgArr.length<6){
                  _this.shwtImgArr.unshift(imgId)
                  _this.shwtImg.unshift({
                  imgSrc:res.tempFilePaths[0],
                  addTag:0
                  })
                }else{
                  _this.$currency.showToast('最多上传6张照片','none')
                }

              }else{
                if(_this.yhfkImgArr.length<6){
                  _this.yhfkImgArr.unshift(imgId)
                  _this.yhfkImg.unshift({
                  imgSrc:res.tempFilePaths[0],
                  addTag:0
                  })
                }else{
                  _this.$currency.showToast('最多上传6张照片','none')
                }
              }
            }
          })
         }
       })
     }else{
        wx.previewImage({    //浏览照片
        current: imgSrc, // 当前显示图片的http链接
        urls: [imgSrc] // 需要预览的图片http链接列表
        })
     }
    },
    commit(){
      var _this=this;
      var userToken=wx.getStorageSync('userToken');
      _this.$request.postData("https://diy.zoomyoung.cn/api/task/set-task-order",{user_token:userToken,class_num:_this.class_info.class_num,position:_this.class_info.position,realname:_this.class_info.realname,phone:_this.class_info.phone,xc_desc:_this.xc_desc,reback_desc:_this.reback_desc,reback_imgs:_this.yhfkImgArr,after_sale_desc:_this.after_sale_desc,after_sale_imgs:_this.shwtImgArr,to_ids:_this.xcArr,id:_this.classId}).then(res =>{
        var res=res.data;
        if(res.level=="success"){
          wx.showToast({
            title:"提交成功",
            duration:2000
          })
        }else{
          wx.showToast({
            title:res.message,
            image:"../../static/images/error02.png",
            duration:3000
          })
        }
        _this.getInformation(_this.classId);
        _this.getClass(_this.selctClassId);
      })
    },
    getClass(index){
      var _this=this
      _this.class_num=[];
      var id= index=="" ? 0 : index;
      console.log(id)
      var userToken=wx.getStorageSync('userToken')
      _this.$request.getData('https://diy.zoomyoung.cn/api/task/get-my-class-num',{user_token:userToken}).then(res =>{
        _this.class_num=res.data.data;
        if(res.data.data.length==0)
        {
          _this.class_num.unshift({
            id:0,
            class_num:'+',
            select:false
          });
        }else{
          for(let [index,value] of _this.class_num.entries())
          {
            value.select=false;
          }
          _this.class_num.unshift({
            id:0,
            class_num:'+',
            select:false
          });
          _this.school_name = res.data.school_name;
        }
        _this.class_num[id].select=true;
     })
    }
  },
  onLoad(){
    this.getClass("");
    this.getInformation("");
  }
}
</script>

<style scoped>
.container{width: 100%;font-size: 14px;padding-bottom:55px}
.school{width: 96%;line-height: 40px;padding-top: 5px;padding-bottom: 5px;font-size: 14px;margin-left: 4%}
.class{width: 92%;padding-top: 10px;padding-bottom:10px;margin-left: 4%;background: #fff;border: 0.2px solid #cccccc;border-radius: 10px;}
.class li{width:70px;height: 30px;line-height: 30px;text-align: center;float: left;border-radius: 5px;border:0.6px solid #cccccc;margin-left:10px;margin-top: 5px;font-size: 16px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;}
.class li.select{background:#000;color:#fff;}
.information{width: 92%;margin-left: 4%;margin-top: 10px;}
.title{width: 100%;height: 60px;margin-left: 5px}
.title span:nth-of-type(1){color: gray;font-size: 17px;line-height: 30px;display: block;}
.title span:nth-of-type(2){color: red;font-size: 13px;line-height: 30px;}
.inputInformation{width: 98%;padding-left: 2%;padding-top: 10px;padding-bottom: 20px;border-bottom: 0.2px solid #cccccc}
.inputInformation li:nth-of-type(1),.inputInformation li:nth-of-type(3){width: 40%;}
.inputInformation li:nth-of-type(2),.inputInformation li:nth-of-type(4){width: 55%;margin-left: 10px;}
.inputInformation li{height: 30px;float: left;display: flex;justify-content: row;margin-bottom:15px;}
.inputInformation li:nth-of-type(1) span,.inputInformation li:nth-of-type(3) span{width: 50px;}
.inputInformation li:nth-of-type(2) span,.inputInformation li:nth-of-type(4) span{width: 94px;}
.inputInformation li:nth-of-type(1) input,.inputInformation li:nth-of-type(3) input{width: 80px;}
.inputInformation li:nth-of-type(2) input,.inputInformation li:nth-of-type(4) input{width: 130px;}
.inputInformation li span{height: 30px;margin-top: 5px;display: block;font-size: 14px;}
.inputInformation li input{height: 30px;border:0.2px solid #cccccc;border-radius: 5px;font-size: 12px;padding-left: 3px;}
.propaganda4{border: 0.8px solid #cccccc;background: #fff;border-radius: 10px;margin-bottom: 20px;padding:5px;color:#666666;}
.propaganda{width: 100%;color: #666666;margin-top: 5px;padding-top: 5px;}
.propaganda textarea{ margin-left:10px;}
.propaganda1{margin-top: 20px;}
.propaganda2{padding:5px;background: #fff;border:0.3px solid #cccccc;border-radius: 10px;}
.propagandaTitle{width: 94%;height: 30px;line-height: 30px;font-size: 16px;margin-left: 5px}
.propagandaDetails{width: 94%;height: 25px;line-height: 25px;font-size: 13px;color: red;margin-left: 5px}
ul.checkboxGroup{width: 100%;margin-top: 20px;}
ul.checkboxGroup li{width: 97%;height: 30px;margin-bottom: 15px;padding-left: 3%;line-height: 30px;font-size: 15px;}
textarea{width: 90%;height: 22px;border:0.2px solid #cccccc;margin-left:10px;border-radius: 10px;margin-top: 10px;font-size: 14px;padding:10px;line-height: 17px;placeholder-style:"center"}
.uploadImg{margin-top: 10px;}
.uploadImg li{width: 50px;height: 50px;float: left;margin-left: 10px;margin-top: 5px;position: relative;}
.error{width: 15px;height: 15px;position: absolute;right: 0;top: 0;}
.upload{width: 50px;height: 50px;border-radius: 10px;}
.save{width: 73px;height: 25px;border-radius: 10px;text-align: center;line-height: 25px;margin:0 auto;font-size: 12px;border:0.2px solid #cccccc;margin-top: 40px;margin-bottom:12px}
</style>
